<template>
  <div class="bgpage">
    <div class="header">
      <div class="back" @click="back()"></div>
      <div class="title" v-if="nameList[this.fatherid-1]">{{nameList[this.fatherid-1].typeName}}</div>
    </div>
    <div class="serveShow">
      <div class="serveName" v-for="item in serveitems" :key="item.id" @click="next(item.id)">
        <img :src="imgsrc" alt="" />
        <div class="info">
          <p class="info-name">{{item.serviceName}}</p>
          <div class="tagBox">
            <span class="info-tag">项目标签</span>
            <span class="info-tag">项目标签</span>
          </div>
          <p class="info-desc">项目描述</p>
          <p class="info-hot">项目实现</p>
          <div class="priceBox">
            <span class="info-price">￥{{item.price.toFixed(2)}}</span>
            <span class="info-time">/小时</span>
          </div>
          <div class="buy">抢购</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {  mapActions,mapState } from 'vuex'
export default {
  data () {
    return {
      fatherid: "",
      imgsrc:"",
    }
  },

  created(){
    this.show()
  },
  computed:{
    ...mapState("servelist",["serveitems","imglist"]),
    ...mapState("homes",["nameList"]),
    ...mapState("test",["total"])

  },
  
  methods:{
    ...mapActions("homes",["init"]),
    ...mapActions("servelist",["servetype"]),

    show (){
      this.init()
      this.fatherid = this.$route.params.id
      this.servetype(this.fatherid)
      this.imgsrc = this.imglist[this.fatherid-1].img
    },
    next(id){
      this.$router.push({path:"/itme/homemaintain/" ,
      query:{
        id,
        fatherid:this.fatherid
      }})

    },
    back(){
      this.$router.back();
    }
  },
};
</script>

<style lang="scss" scoped>
.bgpage {
  width: 3.75rem;
  height: 100%;
  background: #f3f3f3;
  .header {
    width: 3.75rem;
    height: 0.61rem;
    background: #16cebb;
    position: sticky;
    top: 0;
    z-index: 2; 
    // filter: blur(0.5rem);
    .back {
      width: 0.12rem;
      height: 0.12rem;
      // border: 0.02rem solid #333333;
      position: absolute;
      top: 0.17rem;
      left: 0.28rem;
      background:  url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng0b66a72cb24f8e852ade04bd60cf07105e2b7458ab88b827457ca9d37e3ac900) 
    no-repeat;
    }
    .title {
      width: 0.72rem;
      height: 0.25rem;
      font-size: 0.18rem;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #333333;
      line-height: 0.25rem;
      display: flex;
      position: absolute;
      top: 0.13rem;
      left: 1.51rem;
    }
  }


  .serveShow {
    width: 3.6rem;
    background: #ffffff;
    border-radius: 0.12rem;
    margin-left: 0.08rem;
    padding: 0.07rem;
    box-sizing: border-box;
    .serveName {
      width: 100%;
      height: 1.03rem;
      margin-bottom: 0.2rem;
      overflow: hidden;
      img {
        width: 1.25rem;
        height: 1.03rem;
        float: left;
      }
      .info {
        float: left;
        margin-left: 0.11rem;
        
        .info-name {
          height: 0.22rem;
          font-size: 0.16rem;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #333333;
          line-height: 0.22rem;
        }
        .tagBox {
          margin: 0.03rem 0;
          height: 0.18rem;
          .info-tag {
            display: block;
            float: left;
            height: 0.18rem;
            border-radius: 0.05rem;
            border: 0.01rem solid #00d2bb;
            font-size: 0.1rem;
            font-family: PingFangSC;
            color: #333333;
            line-height: 0.18rem;
            padding: 0 0.04rem;
            margin-right: 0.05rem;
          }
        }
        .info-desc {
          height: 0.17rem;
          font-size: 0.12rem;
          font-family: PingFangSC;
          color: #666666;
          line-height: 0.17rem;
        }
        .info-hot {
          width: 0.65rem;
          height: 0.14rem;
          font-size: 0.1rem;
          font-family: PingFangSC;
          color: #c45353;
          line-height: 0.14rem;
        }
        .priceBox {
          display: flex;
          margin-top: 0.03rem;
          .info-price {
            display: block;
            height: 0.23rem;
            font-size: 0.16rem;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #d86047;
            line-height: 0.22rem;
          }
          .info-time {
            margin-top: 0.04rem;
            display: block;
            height: 0.14rem;
            font-size: 0.1rem;
            font-family: PingFangSC;
            color: #e8563d;
            line-height: 0.14rem;
          }
        }
        .buy {
          position: relative;
          bottom: 0.25rem;
          left: 1.6rem;
          width: 0.45rem;
          height: 0.25rem;
          background: linear-gradient(270deg, #f3a640 0%, #ea4f2f 100%);
          border-radius: 0.13rem;
          font-size: 0.12rem;
          font-family: PingFangHK-Semibold, PingFangHK;
          font-weight: 600;
          color: #ffffff;
          line-height: 0.25rem;
          text-align: center;
        }
      }
    }
  }
}
</style>
